<template>
  <div id="chart-container" style="height: 800px"></div>
</template>

<script>
export default {
  data: () => ({}),
  mounted() {
    const scriptUrls = ['https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js', 'https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js']
    let loadedCount = 0

    const loadScript = (url) => {
      return new Promise((resolve, reject) => {
        const script = document.createElement('script')
        script.src = url
        script.onload = () => {
          loadedCount++
          if (loadedCount === scriptUrls.length) {
            this.init()
          }
          resolve()
        }
        script.onerror = reject
        document.head.appendChild(script)
      })
    }

    scriptUrls.forEach((url) => loadScript(url))
  },
  methods: {
    init() {
      const dataSource = {
        chart: {
          theme: 'candy',
          bgColor: 'transparent', // 背景颜色设为透明
          bgAlpha: '0', // 背景透明度（0=完全透明，100=不透明）
          caption: 'The Global Wealth Pyramid',
          subcaption: 'Credit Suisse 2017',
          showvalues: '0',
          numbersuffix: ' trn',
          numberprefix: '$',
          plottooltext: '',
          is2d: '0',
        },
        data: [
          {
            label: 'Top 32M',
            value: '128.7',
          },
          {
            label: '',
            value: '8.7',
            color: 'rgba(255,255,255,0)',
            alpha: '0',
          },
          {
            label: 'Next 391M',
            value: '111.4',
          },
          {
            label: '',
            value: '8.7',
            color: 'rgba(255,255,255,0)',
            alpha: '0',
          },
          {
            label: 'Next 1054M',
            value: '32.5',
          },
          {
            label: '',
            value: '8.7',
            color: 'rgba(255,255,255,0)',
            alpha: '0',
          },
          {
            label: 'Last 3474M',
            value: '7.6',
          },
        ],
      }

      FusionCharts.ready(function () {
        var myChart = new FusionCharts({
          type: 'pyramid',
          renderAt: 'chart-container',
          width: '100%',
          height: '100%',
          dataFormat: 'json',
          dataSource,
        }).render()
      })
    },
  },
}
</script>
